<template>
    <div id="linkRef"></div>
</template>

<script setup>
import { dia, shapes, layout, g, elementTools, linkTools } from "jointjs";
import "/node_modules/jointjs/dist/joint.css";

defineOptions({
    name: "ElementTools",
});

const graph = ref(null);
const paper = ref(null);
const rectGroupList = ref([]);

// 创建元素工具，每个元素工具都需要单独构建并添加到元素视图
function createTools () {
    const boundaryTool = new elementTools.Boundary({
        useModelGeometry: false,
        padding: 20,
        rotate: true
    });
    const removeButton = new elementTools.Remove();
    const toolsView = new dia.ToolsView({
        tools: [
            boundaryTool,
            removeButton
        ]
    });
    return toolsView;
}

const createLinkTool = () => {
    const verticesTool = new linkTools.Vertices();
    const segmentsTool = new linkTools.Segments();
    const sourceArrowheadTool = new linkTools.SourceArrowhead();
    const targetArrowheadTool = new linkTools.TargetArrowhead();
    const sourceAnchorTool = new linkTools.SourceAnchor();
    const targetAnchorTool = new linkTools.TargetAnchor();
    const boundaryTool = new linkTools.Boundary();
    const removeButton = new linkTools.Remove();

    const toolsView = new dia.ToolsView({
        tools: [
            verticesTool, segmentsTool,
            sourceArrowheadTool, targetArrowheadTool,
            sourceAnchorTool, targetAnchorTool,
            boundaryTool, 
            removeButton
        ]
    });
    return toolsView
}

// 创建图形和页面
function createGraph() {
    graph.value = new dia.Graph({}, { cellNamespace: shapes });
    paper.value = new dia.Paper({
        el: document.getElementById("linkRef"),
        model: graph.value,
        width: 600,
        height: 500,
        gridSize: 10,
        drawGrid: true,
        background: {
            color: "rgba(0, 255, 0, 0.3)",
        },
        cellViewNamespace: shapes,
    });
    paper.value.on('element:mouseenter', function(elementView) {
        elementView.showTools();
    });

    paper.value.on('element:mouseleave', function(elementView) {
        elementView.hideTools();
    });
    // 双击连线事件
    paper.value.on('link:pointerdblclick', (elementView, evt) => {
        evt.stopPropagation();
        const currentElement = elementView.model
        currentElement.attr({
            line: {
                stroke: 'tomato',
                strokeWidth: 4
            }
        })
    });
    paper.value.on('link:mouseenter', function(linkView) {
        linkView.addTools(createLinkTool());
    });

    paper.value.on('link:mouseleave', function(linkView) {
        linkView.removeTools();
    });
}

// 创建矩形
function createRect() {
    const rect = new shapes.standard.Rectangle();
    rect.position(50, 130);
    rect.resize(100, 40);
    rect.attr({
        body: {
            fill: "blue",
            rx: 10,
            ry: 10,
            // stroke: "tomato",
            strokeWidth: 2,
        },
        label: {
            text: "Hello",
            fill: "white",
            fontSize: 20,
            fontWeight: 600,
        },
    });
    rect.addTo(graph.value);
    rectGroupList.value.push(rect);


    const rect2 = rect.clone();
    rect2.position(400, 130)
    // rect2.translate(300, 130);
    rect2.attr({
        label: {
            text: "World",
            fill: "pink",
            fontSize: 20,
            fontWeight: 600,
        },
    });
    rect2.addTo(graph.value);
    var elementView2 = rect2.findView(paper.value);
    elementView2.addTools(createTools());
    const elementView1 = rect.findView(paper.value);
    elementView1.addTools(createTools());
    // 默认显示第一个工具
    // elementView1.hideTools();
    elementView2.hideTools();
    rectGroupList.value.push(rect2);
}

// 创建连线
let link = ref(null)
function createLink() {
    link = new shapes.standard.Link();
    link.source(rectGroupList.value[0]);
    link.target(rectGroupList.value[1]);
    // 配置连线箭头样式，可以使用默认的箭头样式
    link.attr({
        line: {
            // 源节点箭头
            sourceMarker: {
                type: "path",
                stroke: '#10ac84',
                strokeWidth: 2,
                fill: '#10ac84',
                d: "M 20 -10 0 0 20 10 Z",
            },
            // 目标节点箭头
            targetMarker: {
                type: "path",
                stroke: "green",
                strokeWidth: 2,
                fill: "yellow",
                d: "M 20 -10 0 0 20 10 Z",
            },
        },
    });
    // 创建连线label标签，不给偏移位置，默认label标签居于线中间，可以时图片文本，节点拖动时跟着移动
    link.labels([
        {
            position: {
                offset: {
                    x: 0,
                    y: 20,
                },
            },
            attrs: {
                text: {
                    text: "双击连线可以改变颜色",
                },
            },
        },
        {
            position: {
                distance: 0.56
            },
            attrs: {
                text: {
                    text: "我是标签2",
                },
            },
        },
    ]);
    link.addTo(graph.value);
    const linkView = link.findView(paper.value);
    linkView.addTools(createLinkTool());
    linkView.hideTools()
}

nextTick(() => {
    // 基础连线
    createGraph();
    createRect();
    createLink();
});
</script>
